---
section: 99-Packages
name: parcel-config
order: 3
---

# @compiled/parcel-config

import { Lozenge, HorizontalStack } from '@compiled/website-ui';

<HorizontalStack gap={0.5} spacing={2}>
  <Lozenge>Parcel 2</Lozenge>
</HorizontalStack>

[Parcel v2](https://v2.parceljs.org) configuration used to set up a parcel project with Compiled CSS-in-JS.
See [installation](/installation#parcel) for setup instructions.

```bash
npm install @compiled/parcel-config --save-dev
```

## Options

Configure using any of the following at the root of your project.

- `.compiledcssrc`
- `.compiledcssrc.json`
- `compiledcss.js`
- `compiledcss.config.js`

```json
// .compiledcssrc
{
  "importReact": true
}
```

Through the Compiled configuration file (e.g. `.compiledcssrc`), you can set options for any of our Parcel plugins (`@compiled/parcel-transformer` and `@compiled/parcel-optimizer`), as well as for the underlying `@compiled/babel-plugin`. This page will focus on the options that are unique to `@compiled/parcel-transformer` and `@compiled/parcel-optimizer`.

### Options used by Compiled Parcel plugins

`@compiled/parcel-transformer` accepts the following options:

- `classNameCompressionMapFilePath`
- `extensions`
- `extract`
- `extractFromDistributedCode`
- `inlineCss`
- `parserBabelPlugins`
- `resolve`
- `sortAtRules`
- `ssr`
- `styleSheetPath`
- `transformerBabelPlugins`

#### classNameCompressionMapFilePath

Don't use this!

This is an alternative to `classNameCompressionMap`, where instead of providing the compression map itself, you can provide a file path to the compression map. If both are provided, `classNameCompressionMap` will take precedence over `classNameCompressionMapFilePath`.

Note that this is enabled only if `extract` is set to `true`.

#### extensions

Extensions that we should consider to be code. We use these to identify if a file should be parsed.

If set, the value of `extensions` will be used in two places:

1. If `resolver` is not set, then `extensions` will be passed to the default resolver, `enhanced-resolver`.
2. This is also passed to `@compiled/babel-plugin` under the hood.

- Type: `string[]`
- Default: none, but note that `enhanced-resolver` and `@compiled/babel-plugin` have their own different defaults when the `extensions` option is not set.

#### extract

Enables `@compiled/babel-plugin-strip-runtime`, i.e. the stylesheet extraction feature. When enabled, Compiled react components will be removed and the css will be extracted into a single CSS stylesheet.

The stylesheet extraction feature is disabled on local development due to a [known issue](https://github.com/atlassian-labs/compiled/issues/1306).

- Type: `boolean`
- Default: `false`

#### extractFromDistributedCode

Unused.

#### extractStylesToDirectory

When set, extracts styles to an external CSS file. Requires `extract` to be set to `true` as well. This is passed directly to `@compiled/babel-plugin-strip-runtime` -- see the [`@compiled/babel-plugin-strip-runtime` documentation](/pkg-babel-plugin-strip-runtime#extractstylestodirectory) for more information.

- Type: `{ source: string; dest: string }`
- Default: `undefined`

#### inlineCss

Indicates whether CSS content is inlined in HTML or served as a external .css file when the stylesheet extraction is enabled.

- Type: `boolean`
- Default: `false`

#### parserBabelPlugins

Babel parser plugins to be used when parsing the source code. Define these to enable extra babel parsers (for example, typescript).
See the [babel docs](https://babeljs.io/docs/en/plugins/#syntax-plugins) for more context.

Example usage:

```json
// .compiledcssrc
{
  "parserBabelPlugins": ["typescript"]
}
```

This is also passed to `@compiled/babel-plugin` under the hood.

- Type: `ParserPlugin[]`
- Default: `undefined`

#### \[Deprecated\] resolve

If `resolver` is not provided, `resolve` specifies options that should be passed to the default resolver (`enhanced-resolver`). The resolver is used to statically evaluate import declarations.

Example usage:

```json
// .compiledcssrc
{
  "resolve": {
    "mainFields": ["module:es2019", "browser", "module", "main"]
  }
}
```

See [enhanced-resolver docs](https://github.com/webpack/enhanced-resolve#resolver-options) for more options.

- Type: `ResolveOptions`
- Default: `undefined`

#### sortAtRules

Whether to sort at-rules, including media queries.

See [here](/media-queries-and-other-at-rules) for more information.

- Type: `boolean`
- Default: `true`

#### sortShorthand

Whether to sort shorthand properties so that they always some before longhand properties.

For example, `border` will always come before `borderColor`, which will always come before `borderTopColor`.

See [Shorthand properties](/shorthand) for more information.

- Type: `boolean`
- Default: `true`

### \[Obsolete\] ssr

> This is hardcoded to `true` now.

To be used in conjunction with `extract: true` when having a different configuration for SSR.

When set to true, `ssr` will prevent additional require (one import per rule) in the bundle during style sheet extraction.

This is equivalent to setting `compiledRequireExclude` in `@compiled/babel-plugin-strip-runtime`.

- Type: `boolean`

#### \[Obsolete\] styleSheetPath

Unused. In the past, this was an internal option passed to `@compiled/babel-plugin-strip-runtime`. Don't use this!

### transformerBabelPlugins

Babel transformer plugins to be applied to transformed files before the Compiled evaluation.

Use this if you have some sort of babel plugin that should run before Compiled,
likely because you have some sort of non-standard syntax in your code.
See the [babel docs](https://babeljs.io/docs/en/plugins/#transform-plugins) for more context.

Example usage:

```json
// .compiledcssrc
{
  "transformerBabelPlugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}
```

- Type: `PluginItem[]`
- Default: `undefined`

### Options used by `@compiled/babel-plugin`

The following options are passed directly to `@compiled/babel-plugin`:

- `addComponentName`
- `classHashPrefix`
- `classNameCompressionMap`
- `importReact`
- `importSources`
- `optimizeCss`
- `resolver`

Passing other `@compiled/babel-plugin` options not listed above will also work, but have not been tested.

To avoid repetition, we have not included the descriptions here. Please refer to the [`@compiled/babel-plugin` documentation](/pkg-babel-plugin) for more information.
